<!DOCTYPE html>
<html lang="en" xmlns: xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta content="IE=Edge" http-equiv="X-UA-Compatible"/>
    <title>绑定网贷银行卡—小牛在线</title>
    <script th:src="@{/script/jquery-1.12.4.js}"></script>
    <link rel="stylesheet" th:href="@{/css/apply.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <script th:src="@{/script/bootstrap.js}"></script>
    <meta content="upgrade-insecure-requests" http-equiv="Content-Security-Policy">
    <link href="http://image.xiaoniu88.com/static/WebXn/dist/css/base-ddb0535420.css" rel="stylesheet"/>
    <script>
        window.global = {
            cdn: "//image.xiaoniu88.com",
            siteroot: "https://www.xiaoniu88.com",
            staticPath: "//image.xiaoniu88.com/static/WebXn/dist",
            contextPath: "/payment",
            serverTime: "1591919679692" * 1,
            userId: "6086292",
            isLogin: true
        }
    </script>

    <script src="//image.xiaoniu88.com/static/WebXn/dist/module/common/common-83987ed24e.js" type="text/javascript"></script>
    <script>
        $(function () {
            seajs.use('module/common/common')
        })
    </script>
    <script src="http://image.xiaoniu88.com/static/WebXn/dist/lib/base-6100562494.js" type="text/javascript"></script>
    <link rel="stylesheet" th:href="@{/css/base-ddb0535420 (1).css}"/>
    <link href="//image.xiaoniu88.com/static/WebXn/dist/page/payment/deposit/apply/css/apply-73c8a78781.css" rel="stylesheet"/>
</head>
<body>
<input id="emcode" type="hidden"/>
<input id="checked" type="hidden"/><!--th:value="${session.applyType}"-->
<!--<header th:replace="/common::commonHeader"></header>

&lt;!&ndash;导航&ndash;&gt;
<div th:replace="/common::commonNav"></div>-->
<div class="row">
    <div th:replace="loan/public::head"></div>
</div>
<div class="container" style="width: 100%;">
    <div class="g-account-main">
        <div class="path">您现在的位置：我的账户 &gt;
            <span id="pathTitle">绑定网贷银行卡</span>
        </div>
        <div class="center user-box">

            <!--start 我的账户左边菜单列表--><!--th:replace="/user/AccountSafe::usersafe"-->
            <!--<div th:replace="AccountSafe::usersafes"></div>-->
            <div th:replace="loan/alone/AccountOverview::inflist"/>


            <!-- 左侧当前选中菜单 -->
            <div class="account-cont" id="contanier">
                <h3 style="height: 45px;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    padding: 16px 0px 0px 21px;">还款信息</h3>
                <div class="loanimf" style=" margin-top: 10px;
    height: 100px;
    border: 1px solid #CCC;
    width: 838px;
    margin: 20px 0px 0px 23px;
    padding: 5px 0px 0px 96px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.61)">
                    <ul>
                        <li>借款金额：<span th:text="${session.payloan.getMoney()}+'元'"></span></li>
                        <li>月利率：<span th:text="${session.payloan.getLoaninterest()}">1.1%</span></li>
                        <li>期限：<span th:text="${session.payloan.getLoandate()}+'个月'">3</span></li>
                        <li>应付本息：<span th:text="${session.totlemoeny}+'元'">3033元</span></li>
                        <li>已付本息：<span th:text="${session.repayment}+'元'">1011元</span></li>
                        <li th:text="'利息：'+${(session.totlemoeny)-(session.payloan.getMoney())}+'元'">利息：<span>33元</span></li>
                    </ul>
                </div>
                <div id="loanapply" style="display: block">
                    <div class="panel panel-default">
                        <table class="table">
                            <thead class="card">
                            <tr>
                                <th>还款日</th>
                                <th>未还金额(含本金，利息)/已还金额</th>
                                <th>未还本金</th>
                                <th>未还利息</th>
                                <th>状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="payloan" th:each="entry:${session.paylist}" th:if="${session.loanis == 1}">
                                <th scope="row" style="line-height: 30px" th:text="${#dates.format(entry.getPaydate(), 'yyyy-MM-dd')}"></th>
                                <td style="line-height: 30px" th:text="${entry.getPaymoney()}+'/'+${entry.getPaidmoney()}"></td>
                                <td style="line-height: 30px" th:text="${entry.getPayselfmoney()}"></td>
                                <td style="line-height: 30px" th:text="${entry.getPayinterest()}"></td>
                                <td th:if="${entry.getPaystate()==0}">待还款</td>
                                <td th:if="${entry.getPaystate()==1}">还款成功</td>

                            </tr>
                            </tbody>
                            <tfoot>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div>
                    <div th:if="${session.allpay == 1}">
                        <form id="payform" method="post" th:action="@{huanpay}">
                            <input name="lid" th:value="${session.payloan.getLid()}" type="hidden">
                            <div class="form-group">
                                <label class="col-md-2 control-label">距离下期还款还有:</label>
                                <h3 style="display: inline-block;
    margin-left: -737px;" th:text="${session.pay}+'天'"></h3>
                            </div>
                            <h3 style="margin: 40px 0px 10px -420px;
    font-size: 16px;
    font-weight: 800;">选择还款:</h3>
                            <div class="form-group" id="paydiv1" style="width: 500px;
    height: 40px;
    line-height: 40px;border: 1px dashed;margin-left: 203px" th:if="${session.loaning!=null}">
                                <input id="pay1" name="paytype" style="float: left;margin-top: 14px;margin-left: 10px" th:value="dangpay" type="radio"/>
                                <input name="paymoney" th:value="${session.loaning.getPaymoney()}" type="hidden"/>
                                <input name="id" th:value="${session.loaning.getId()}" type="hidden">
                                <label class="col-md-2 control-label" for="pay1" style="      width: 289px;">当月要还款的金额:<h3
                                        style="    display: inline-block;font-weight: 800;" th:text="${session.loaning.getPaymoney()}+'元'"></h3></label>
                            </div>
                            <div class="form-group" style="width: 500px;
    height: 40px;
    line-height: 40px;border: 1px dashed;margin-left: 203px" th:if="${session.loaning==null}">
                                <label class="col-md-2 control-label" style="         width: 389px;">当月已还清</label>
                            </div>
                            <div class="form-group" id="paydiv2" style="width: 500px;
    height: 40px;
    line-height: 40px;border: 1px dashed;margin-left: 203px" th:if="${session.loaning==null}">
                                <input id="pay2" name="paytype" style="float: left;margin-top: 14px;margin-left: 10px" th:value="dangpay" type="radio"/>
                                <input name="paymoney" th:value="${session.nopayloan.getPaymoney()}" type="hidden"/>
                                <input name="id" th:value="${session.nopayloan.getId()}" type="hidden">
                                <label class="col-md-2 control-label" for="pay2" style="   width: 389px;"
                                       th:text="'提前还清'+${#dates.format(session.nopayloan.getPaydate(), 'yyyy-MM-dd')}+'期的金额:'+${session.nopayloan.getPaymoney()}+'元'"></label>
                            </div>
                            <div class="form-group" id="paydiv3" style="width: 500px;
    height: 40px;
    line-height: 40px;border: 1px dashed;margin-left: 203px">
                                <input id="pay3" name="paytype" style="float: left;margin-top: 14px;margin-left: 10px" th:value="quanpay" type="radio"/>
                                <input name="payall" th:value="${session.totlemoeny - session.repayment}" type="hidden"/>
                                <label class="col-md-2 control-label" for="pay3" style="  width: 389px;        ">提前还清所有贷款:<h3
                                        style="    display: inline-block;font-weight: 800;" th:text="${session.totlemoeny - session.repayment}+'元'"></h3>
                                </label>
                            </div>
                        </form>
                        <div class="form-group" style="width: 500px;
    height: 40px;
    line-height: 40px;

    margin-left: 100px;">
                            <button class="btn btn-primary" id="huankuan" onclick="huankuan()" style="background-color: #658297;width: 75px" type="submit">还款
                            </button>
                        </div>
                        <button class="btn btn-primary" onclick="reppayloan()" style="background-color: #658297;
    margin: -68px 0px 0px 300px;
    width: 75px;
    margin-left: 203px;" type="button">上一步
                        </button>
                    </div>

                    <div style="margin-right: 359px;" th:if="${session.allpay == 0}">
                        <div style="    margin: 40px 0px 0px 382px;
    font-size: 20px;">已还清所有贷款
                        </div>
                        <button class="btn btn-primary" onclick="reppayloan()" style="background-color: #658297;
    margin: 7px 0px 0px 304px;
    width: 75px;
   margin-left: 387px;" type="button">上一步
                        </button>
                    </div>

                    <!-- 模态框（Modal） -->
                    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
                        <div class="modal-dialog" style="margin-top: 150px;
    width: 300px;  ">
                            <div class="modal-content" style="height: 200px;">
                                <div class="modal-header">
                                    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
                                    <h4 class="modal-title" id="myModalLabel">请输入交易密码</h4>
                                </div>
                                <div>
                                    <h3></h3>
                                </div>
                                <div class="wrap" style="width: 332px">
                                    <span id="zhifu" style="font-weight: 800;
    font-size: 18px;"></span>
                                    <div class="inputBoxContainer" id="inputBoxContainer">
                                        <input class="realInput" type="text"/>
                                        <div class="bogusInput">
                                            <input disabled maxlength="6" type="password"/>
                                            <input disabled maxlength="6" type="password"/>
                                            <input disabled maxlength="6" type="password"/>
                                            <input disabled maxlength="6" type="password"/>
                                            <input disabled maxlength="6" type="password"/>
                                            <input disabled maxlength="6" type="password"/>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-default" data-dismiss="modal" style="margin-right: 17px;
    width: 70px;" type="button">取消
                                        </button>
                                        <button class="btn btn-primary" data-dismiss="modal" onclick="paypwd()" style="  margin-right: 50px;
    width: 70px;" type="button">支付
                                        </button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="g-h30"></div>
    </div>
</div>


<div class="row">
    <!--网站底部-->
    <div th:replace="common/public::footer"></div>
</div>

</body>
<script type="text/javascript">
    $(window).bind("load", function () {
        $("#payloan").css("background", "#658297");
        $("#colorpayloan").css("color", "#fff");
    });

    function applyloan() {
        var div1 = document.getElementById('loanapply');
        div1.style.display = "block";
        var div1 = document.getElementById('loan');
        div1.style.display = "none";
    }

    function loan() {
        var div1 = document.getElementById('loanapply');
        div1.style.display = "none";
        var div1 = document.getElementById('loan');
        div1.style.display = "block";
    }
</script>
<script type="text/javascript">
    $('input:radio[name="paytype"]').change(function () {
        if ($("#pay1").is(":checked")) {
            var div1 = document.getElementById('paydiv1');
            div1.style.border = '2px solid #658297';


            var div3 = document.getElementById('paydiv3');
            div3.style.border = '1px dashed';
        }
        if ($("#pay2").is(":checked")) {


            var div2 = document.getElementById('paydiv2');
            div2.style.border = '2px solid #658297';

            var div3 = document.getElementById('paydiv3');
            div3.style.border = '1px dashed';
        }
        if ($("#pay3").is(":checked")) {
            var div1 = document.getElementById('paydiv1');
            if (div1 != null) {
                div1.style.border = '1px dashed';
            }


            var div2 = document.getElementById('paydiv2');
            if (div2 != null) {
                div2.style.border = '1px dashed';
            }

            var div3 = document.getElementById('paydiv3');
            div3.style.border = '2px solid #658297';
        }
    });


    function reppayloan() {
        window.location.href = "/erb/loan/prepayloan"
    }


    (function () {
        var container = document.getElementById("inputBoxContainer");
        boxInput = {
            maxLength: "",
            realInput: "",
            bogusInput: "",
            bogusInputArr: "",
            callback: "",
            init: function (fun) {
                var that = this;
                this.callback = fun;
                that.realInput = container.children[0];
                that.bogusInput = container.children[1];
                that.bogusInputArr = that.bogusInput.children;
                that.maxLength = that.bogusInputArr[0].getAttribute("maxlength");
                that.realInput.oninput = function () {
                    that.setValue();
                };
                that.realInput.onpropertychange = function () {
                    that.setValue();
                }
            },
            setValue: function () {
                this.realInput.value = this.realInput.value.replace(/\D/g, "");
                console.log(this.realInput.value.replace(/\D/g, ""));
                var real_str = this.realInput.value;
                for (var i = 0; i < this.maxLength; i++) {
                    this.bogusInputArr[i].value = real_str[i] ? real_str[i] : "";
                }
                if (real_str.length >= this.maxLength) {
                    this.realInput.value = real_str.substring(0, 6);
                    this.callback();
                }
            },
            getBoxInputValue: function () {
                var realValue = "";
                for (var i in this.bogusInputArr) {
                    if (!this.bogusInputArr[i].value) {
                        break;
                    }
                    realValue += this.bogusInputArr[i].value;
                }
                return realValue;
            }
        }
    })();
    boxInput.init(function () {
        getValue();
    });
    document.getElementById("confirmButton").onclick = function () {
        getValue();
    };

    function getValue() {
        document.getElementById("showValue").innerText = boxInput.getBoxInputValue();
    }

    function huankuan() {
        var val = $('input:radio[name="paytype"]:checked').val();
        if (val == null) {
            alert("请选着还款!");
            return false;
        } else {
            if (val == 'dangpay') {
                $("#zhifu").html("支付￥" + $("input[ name='paymoney']").val())
            }
            if (val == "quanpay") {
                $("#zhifu").html("支付￥" + $("input[ name='payall']").val())
            }
            $("#huankuan").attr("data-toggle", 'modal');
            $("#huankuan").attr("data-target", '#myModal');
        }
    }

    function paypwd() {
        var val = $('input:radio[name="paytype"]:checked').val();
        var money = 0;
        if (val == 'dangpay') {
            money = $("input[name='paymoney']").val()
        }
        if (val == "quanpay") {
            money = $("input[name='payall']").val()
        }
        $.ajax({
            type: "post",
            dataType: "json",
            url: "/erb/loan/pwdloan", //发送请求地址
            data: {
                paypwd: boxInput.getBoxInputValue(),
                money: money
            },
            success: function (data) {
                if (data == 1) {
                    $("#payform").submit()
                } else if (data == 0) {
                    alert("密码输错误");
                } else if (data == 2) {
                    alert("余额不足");
                    window.location.href = "Personal/preacover";
                } else if (data == -1) {
                    alert("请先设置密码");
                    window.location.href = "Personal/toBcardPwd";
                }
            }
        })
    }

</script>

</html>